<template>
	<view >
		<!-- 忽略该部分 -->
	<!-- 	<view class="header" >
			<navigator url="/pages/work/ponit" class="tempbox left-tempbox">
			      <image src="../static/images/tempIconWhite.png" alt="icon" class="temp-icon"></image>
			      <span class="temp-text">温度检测</span>
			    </navigator>
			    
			    <navigator url="/pages/work/car" class="tempbox right-tempbox">
			      <image src="../static/images/carStat.png" alt="icon" class="temp-icon"></image>
			      <span class="temp-text">小车状态</span>
			    
			</navigator>
		</view> -->
		<view class="header-title">
			<image src="../static/images/deviceheadertitle.png" mode="" class="bottom-title"></image>
			<view class="right-section"> <button class="add-line-button" @click="openModal">+</button> </view>
		</view>
	 <view class="header-img">
		  <image src="../static/images/deviceheaderimg.png" mode="" class="bottom-img"></image>
		</view>
	<!-- <view class="container" >
	  
	<view class="row">
	<view class="label-title">
			 添加设备
	</view>
		<view class="right-section"> <button class="add-line-button" @click="openModal">+</button> </view>
		</view>
	  </view>	 -->
	  
	  <view class="container">
	    <view class="row">
			
	 <view class="label-title">
		 已删除的设备列表:
	 </view>

	
	    </view>

		  
			</view>
	  <view style="background-color:#f7f7f7; width: 95%; height: 50%; display: flex; justify-content: center; display: flex;   margin-top: 15rpx; margin-left: 2%; border-radius: 10rpx; " >
		  <view class="device-list">
		  	  <view v-for="(item, index) in devices" :key="index" class="course-info">   
		  	    <!-- <image  class="item-image" mode="aspectFit"></image> -->
		  <!-- 	      <view class="course-productionLine">{{item.productionLine }}</view> -->
		  		   <view class="course-name">{{ item.customName }} </view>
<!-- 		  		   <view class="course-productionLine">查看设备最后状态</view> -->
		  <!-- 		<view class="basic-flex"> -->
		  <!-- 		<image src="../static/images/open.png" class="item-icon" mode="aspectFit"></image></image> -->
		  <!-- 		</view> -->
		  	   </view>
		  		</view>
	  </view>
	 
		
	</view>
</template>

<script>
	import { listDevice, listDelDevice, listProductionDevice, postDataToAllProduction, postDataToADevice, delDevice, updateDevice,getNavigateUrlBase  } from "@/api/system/device.js";
	import { getCache, setCache, removeCache } from "@/utils/cache.js";
	import msgUtils from "@/plugins/modal.js";
	
		
	export default {
		data() {
			return {
				
				showModal: false,
				deviceName: '',
				
				deviceType: ['温度传感器', '小车状态传感器', '未开发设备'],
				deviceTypeNum: [1, 2, 3],
				selectedDeviceTypeIndex: 0,
				productionLines: [1, 2, 3],
				selectedProductionLineIndex: 0,
									   
				devices:[
					{
						name:"设备1",
						productionLine:"产线1"	,
						image:'../static/images/彩色icon2.png',
						
					},{
						name:"设备2",
						productionLine:"产线1",
						image:'../static/images/蓝色icon1.png',
					
					},
					{
						name:"设备3",
						productionLine:"产线2",
						image:'../static/images/彩色icon3.png',
					
					},{
						name:"设备4",
						productionLine:"产线2",
						image:'../static/images/蓝色icon2.png',
						}
				],
			};
		},
		computed: {
		
			selecterpxroductionLine() {
				return this.productionLines[this.selectedProductionLineIndex];
			},
			selectedDeviceType() {
				return this.deviceType[this.selectedDeviceTypeIndex];
			},
			selectedDeviceTypeVal() {
				return this.deviceTypeNum[this.selectedDeviceTypeIndex];
			}
		},
		onShow() {
			// 从 this.$route.query 中获取查询参数  
			this.correctOnShow();
			
		},
		onLoad() {
			this.getDelDeviceList();
		},
		methods :{
			onShow: () => {  
			  // 这里 this 将会是 undefined，因为箭头函数没有自己的 this  
			  // 应该避免在 methods 中使用箭头函数  
			},  
			correctOnShow: function() {  
			  	// ... 执行其他操作  
				this.getDelDeviceList();
			},
			
			getNavigateUrl(deviceType){
				return getNavigateUrlBase(deviceType)
			},
			getDelDeviceList() {
			  this.loading = true;
			  listDelDevice({pageSize:this.$store.state.maxDeviceNumber, pageNum:1}).then(response => {
			    this.devices = response.rows;
				console.log(response.rows)
				console.log(this.devices)
			    this.loading = false;
			  });
			},
			openModal() {
				console.log(222)
				listProductionDevice(-1,{}).then(res=>{
					console.log(res)
					if(res.total>0){
						msgUtils.msgError('有设备未配置产线，不能进行添加设备操作！')
						return 
					} else {
						this.showModal = true;
					}
				})
			
			},
			closeModal() {
			  this.showModal = false;
			},
			deviceTypeChange(e) {
			  this.selectedDeviceTypeIndex = e.detail.value;
			  console.log(this.selectedDeviceTypeIndex)
			},
			productionLineChange(e) {
			  this.selectedProductionLineIndex = e.detail.value;
			},
			confirmChanges() {
			  // 确认添加的逻辑
			  // uni.showLoading({
			  // 	title:'正在配网...'
			  // })
			  uni.navigateTo({
			  	url:`/pages/main?type=${this.selectedDeviceTypeVal}`
			  })
			  this.closeModal();
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/css/common.css");
	
	page {
	  background-color: #ffffff;
	}
	.header-title{
		display: flex;
		 justify-content: space-between;
		 // margin-bottom: 2rpx;
		 // margin-top: 26rpx;
	}
	
	.header-img{
		display: flex;
		 justify-content: center; /* 水平居中 */
		 margin-bottom: 3%;
	}
	
	.bottom-title{
		width: 420rpx;
		height: 118rpx;
		margin-left: 2%;
		margin-top: 5rpx;
	}
	
	.bottom-img{
		width: 734rpx;
		height: 370rpx;
	}
	
	.modal-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 20rpx;
	}
	
	.modal-title {
	  font-size: 24rpx;
	  font-weight: bold;
	  color: #8DC2FF;
	  border: 2rpx solid #ffffff;
	}
	.close-button {
	  font-size: 24rpx;
	  cursor: pointer;
	}
	.picker-o{
		flex: 2;
		border: 1rpx solid #ccc;
		height:70rpx;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-left: 5rpx;
		margin-right: 30rpx;
		font-size: 20rpx;
		color: black;
	}
	.modal-overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  	z-index: 3;
	}
	
	.modal-content {
	  background: white;
	  border-radius: 10rpx;
	  width: 80%;
	  padding: 20rpx;
	}
	.modal-body .form-group {
	  margin-bottom: 20rpx;
	  font-size: 20rpx;
	}
	
	.modal-body label {
	  display: block;
	  margin-bottom: 5rpx;
	}
	
	.modal-body input {
	  width: 100%;
	  height:100rpx;
	  padding: 10rpx;
	  border-radius: 10rpx;
	  border: 1rpx solid #ccc;
	}
	
	.modal-footer {
	  display: flex;
	 justify-content: center;
	  // margin-left: 42rpx;
	}
	
	.confirm-button {
	 background-color: #8DC2FF;
	 /* 浅蓝色背景 */
	 color: white;
	 padding: 5rpx 10rpx;
	 border: none;
	 border-radius: 30rpx;
	 /* 圆角边框 */
	 cursor: pointer;
	 font-size: 19rpx;
	 width: 320rpx;
	  justify-content: center;
	 // margin-top: 15rpx;
	 // margin-left: 25rpx;
	}
	
	.container {
		display: flex;
	  padding: 10rpx 5rpx;
	background-color: #8DC2FF; /* 浅蓝色背景 */
	border-radius: 15rpx; /* 弧度 */
	// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
	 border: 2rpx solid #ffffff;
	  margin-left: 10rpx;
	  margin-right: 10rpx;
	  margin-top: 10rpx;
	   justify-content: space-between; /* 水平两端对齐 */
	    // justify-content: center; /* 水平居中 */
	}
	
	.container_red {
		display: flex;
	  padding: 10rpx 5rpx;
	background-color: #FFA196 ; /* 浅蓝色背景 */
	border-radius: 20rpx; /* 弧度 */
	// box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果，可选 */
	 border: 2rpx solid #ffffff;
	  margin-left: 22rpx;
	  margin-right: 22rpx;
	  margin-top: 5rpx;
	   justify-content: space-between; /* 水平两端对齐 */
	    // justify-content: center; /* 水平居中 */
	}
	
	 .row {
		display: flex;
	    height: 110rpx;
	    width: 90%; /* 确保 row 占满 container */
	    }
	.label-title {
	  display: flex;
	  text-align: left;
	  margin-top: 15rpx;
	  margin-left: 10rpx;
	  margin-right: 70rpx;
	  height: 50rpx;
	  width: 450rpx;
	  font-size: 23rpx;
	  color: #440523;
	  align-items: center;
	  
	}
	
	.add-line-button {
		width: 50rpx;
		/* 圆的直径 */
		height: 50rpx;
		border-radius: 50%;
		/* 设置为50%使其变成圆形 */
		background-color:#B1D5FF;
		/* 背景色为白色 */
		position: relative;
		/* 用于定位内部的加号按钮 */
		display: flex;
		/* 使用Flexbox来居中加号按钮 */
		justify-content: center;
		align-items: center;
		color: #161F5C;
		/* 蓝色字体 */
		font-size: 34rpx;
		/* 根据需要调整字体大小 */
	}
	
	.right-section {
		   display: flex;
		   align-items: center; /* 垂直居中 */
		 //  margin-left: 20rpx;
		 margin-right: 6%;
		   
	}
	
	.basic-flex {
		display: flex;
		margin-right: 20rpx;
		//justify-content: center;
		column-gap: 90rpx;
	}
	
	
	.header {
	  display: flex;
	  justify-content: space-between; /* 水平分布两个tempbox */
	  align-items: center;
	  width: 100%; /* 确保header宽度为100% */
	  height: 220rpx;
	  padding: 10rpx 24rpx; /* 可选的内边距，避免内容贴边 */
	  
	  
	}
	
	.tempbox {
	  display: flex;
	  align-items: center;
	  width: 45%; /* 每个tempbox占宽度45%，中间留出10%的间距 */
	 height: 200rpx;
	  border-radius: 10rpx; /* 圆角 */
	  padding: 7rpx 15rpx; /* 内边距 */
	  // margin-top: 5rpx;
	  margin-bottom: 10rpx;
	  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 投影效果 */
	  box-sizing: border-box; /* 包括padding在内计算宽度 */
	}
	
	.left-tempbox {
	  justify-content: flex-start;
	   background-color: #8DC2FF; /* 浅蓝色背景 */
	   border: 2rpx solid #ffffff;
	}
	
	.right-tempbox {
	  justify-content: flex-end;
	   background-color: #7B79DA; /* 浅蓝色背景 */
	   border: 2rpx solid #ffffff;
	}
	
	.temp-icon {
	  width: 120rpx;
	  height: 93rpx;
	  margin-right: 12rpx; /* 图片和文字之间的间隔 */
	}
	
	.temp-text {
	  font-size: 23rpx;
	  // color:#515151;
	  
	  color: white;
	}


.device-list{
	// display: flex;
	
	justify-content: center;
	align-items: center;
	padding: 10rpx;
		z-index: 0;
}

.course-info {
	position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */ 
	margin-top: 10rpx;
  margin-bottom: 15rpx;
  border-radius: 10rpx; /* 圆角边框 */
  // background-color: #ffffff;
  background-color: #ffffff;
  padding: 20rpx;
  // border: 1rpx solid white; /* 设置外边框为黑色 */
   box-shadow: 0 9rpx 8rpx rgba(0, 0, 0, 0.2); /* 阴影效果 */ 
   height: 150rpx;
   width: 660rpx;
   // margin-left: 6rpx;
}

.course-name {
   position: absolute; 
    top: 20rpx; /* 根据 padding 调整 */  
    left: 28rpx; /* 根据 padding 调整 */
	font-size: 23rpx;
	color: #440523;
	/* font-weight: bold;/*加粗*、 */
}

.item-image{
	 position: absolute; 
	  top: 20rpx; /* 根据 padding 调整 */  
	  left: 219rpx; /* 根据 padding 调整 */  
	 
	  width: 190rpx;
	  height: 190rpx;
	 
}

	.course-productionLine{
		 position: absolute; 
		 top: 72rpx;
		  bottom:2rpx; /* 根据 padding 调整 */  
		  left: 28rpx; /* 根据 padding 调整 */  
		   color: #440523;
		  font-size: 20rpx;
	}
	// .icon {  
	//   /* position: absolute;  */
	//  top: 16rpx; /* 根据 padding 调整 */  
	//   left: 170rpx; /* 根据 padding 调整 */  
	//   width: 110rpx;
	//   height: 90rpx;
	//   background: #efefef;
	//   border-radius: 50%
	// }
	
	.item-icon {
		

		width: 90rpx;
		height: 90rpx;
		padding: 20rpx;
		background: #efefef;
		border-radius: 50%
	}
</style>

